<template>
  <div class="main_div">
    <div class="left-div">
      <a-tabs type="card" style="height: 100%">
        <a-tab-pane key="1" tab="实验项目" style="height: 100%">
          <BasicTable @register="registerItemsTable" :rowSelection="rowSelection" style="height: 100%">
            <template #tableTitle>
              <a-button type="primary" preIcon="ant-design:plus-outlined"> 查询</a-button>
            </template>
          </BasicTable>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="mid_div">
      <div class="mid_div_s" style="height: 100%">
        <a-tabs v-model:activeKey="activeKey" type="card" style="height: 100%">
          <a-tab-pane key="1" tab="基础信息" style="height: 100%">
            <LabItemsBasicList ref="labItemsBasicTable" :itemsId="formData.itemsId" style="height: 100%"></LabItemsBasicList>
          </a-tab-pane>
          <a-tab-pane key="2" tab="子项目">
            <span>子项目</span>
            <!-- <LabItemsBasicList></LabItemsBasicList> -->
          </a-tab-pane>
          <a-tab-pane key="3" tab="实验条件">
            <span>实验条件</span>
            <!-- <LabItemsBasicList></LabItemsBasicList> -->
          </a-tab-pane>
        </a-tabs>
      </div>
      <div> </div>
    </div>
    <div class="right-div">
      <a-tabs type="card" style="height: 100%">
        <a-tab-pane key="1" tab="实验指标" style="height: 100%">
          <LabItemsTargetList ref="latItemsTargetTable" :itemsId="formData.itemsId"></LabItemsTargetList>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" name="items-temp2" setup>
  import { ref, reactive, nextTick } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { columns } from './LabItemsTemp.data';
  import { list } from './LabItemsTemp.api';
  import LabItemsBasicList from './components/LabItemsBasicList.vue';
  import LabItemsTargetList from './components/LabItemsTargetList.vue';

  const queryParam = reactive<any>({
    type: 'C',
  });

  //项目
  const { tableContext } = useListPage({
    tableProps: {
      api: list,
      columns,
      canResize: false,
      useSearchForm: false,
      showIndexColumn: true,
      showActionColumn: false,
      clickToRowSelect: false,
      scroll: { y: 600 },
      beforeFetch: (params) => {
        return Object.assign(params, queryParam);
      },
    },
  });
  const [registerItemsTable, { reload }, { selectedRowKeys }] = tableContext;

  const rowSelection = {
    type: 'radio',
    columnWidth: 50,
    onChange: onSelectChange,
  };
  let labItemsBasicTable = ref();
  let latItemsTargetTable = ref();

  function onSelectChange(selectedRowKeys: (string | number)[]) {
    formData.itemsId = selectedRowKeys[0];
    console.log(formData.itemsId);
    nextTick(() => {
      labItemsBasicTable.value.reload();
      latItemsTargetTable.value.reload();
    });
  }

  const activeKey = ref('1');

  const formData = reactive<Record<string, any>>({
    itemsId: '',
  });
</script>
<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }

    .query-group-cust {
      width: calc(50% - 15px);
      min-width: 100px !important;
    }

    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }

  .container {
    display: flex; //创建盒子,元素自动水平排列
  }

  .table-wrapper {
    margin-right: 10px;
    /* 通过设置间距可调整表格之间的间隔 */
  }

  .main_div {
    width: 100%;
    height: calc(100vh - 114px);
    border: 1px solid rgb(229, 231, 235);
    background: #fff;
  }

  .left-div {
    float: left;
    width: 33%;
    height: 100%;
    border: 1px solid;
    /deep/.ant-table-pagination {
      flex-wrap: nowrap;
    }
  }

  .mid_div {
    float: left;
    width: 33%;
    height: 100%;
    border: 1px solid;
    border-left: none;
    border-right: none;
  }

  .right-div {
    float: right;
    width: 34%;
    height: 100%;
    border: 1px solid;
  }

  .mid_div_s {
    width: 100%;
    // height: 60%;
    height: 100%;
    // border: 1px solid;
  }
  :deep(.ant-spin-container) {
    height: calc(100% - 76px) !important;
    padding-top: 16px;
    box-sizing: border-box;
  }
  :deep(.ant-spin-nested-loading) {
    height: 100% !important;
  }

  :deep(.ant-tabs-nav) {
    margin: 0 0 1px 0 !important;
  }

  :deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title) {
    min-height: 30px;
    padding: 0 0 1px 0 !important;
  }

  :deep(.jeecg-basic-table .alert) {
    display: none !important;
  }
  /deep/.ant-tabs-content {
    height: 100%;
  }
</style>
